<template>
  <div class="article-attachments">
    <ul v-if="modelValue.length > 0">
      <li v-for="(attach, index) of modelValue" :key="attach.uid">
        <label>{{ attach.name }}</label>
        <div>
          <span v-if="attach.__uploading">
            <el-icon class="is-loading" size="16">
              <Loading/>
            </el-icon>
            <i>上传中...</i>
          </span>
          <Icon v-else value="Close" @click="deleteFile(index)"/>
        </div>
      </li>
    </ul>
    <EmptyTip v-else description="无附件"/>
  </div>
</template>

<script>
export default {
  name: 'ArticleAttachments',
  props: {
    modelValue: {
      type: Array,
      required: true
    }
  },
  methods: {
    deleteFile (index) {
      this.$dialog.deleteConfirm(`确认删除 ${this.modelValue[index].name} 附件吗？`)
        .then(() => {
          const newModelValue = [...this.modelValue]
          newModelValue.splice(index, 1)
          this.$emit('update:modelValue', newModelValue)
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.article-attachments {
  background-color: var(--color-light);
  border-radius: 5px;
  ul li {
    display: flex;
    align-items: center;
    padding: 3px 12px;
    border-bottom: 1px dashed var(--border-color);
    &:hover {
      color: var(--color-primary);
    }
    &:last-of-type {
      border-bottom: 0;
    }
    & > label {
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }
    & > div {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 12px;
      span {
        display: flex;
        align-items: center;
        :deep(.el-icon) {
          margin-right: 3px;
        }
      }
      i {
        font-style: normal;
        font-size: 12px;
        color: var(--font-color-gray);
      }
      .icon {
        cursor: pointer;
        &:hover {
          color: var(--color-danger);
        }
      }
    }
  }
  .el-empty {
    padding: 30px 0;
  }
}
</style>
